Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [css] parzyste wiersze <LI>, jak pokolorowac parzyste elementy za pomocą css?
kukix
post
Post #1





Grupa: Zarejestrowani
Postów: 600
Pomógł: 2
Dołączył: 1.09.2002
Skąd: Wrocław

Ostrzeżenie: (0%)
-----

Witam.
W jaki sposób można pogrubic parzyste wiersze listy LI..?

Próbowalem w ten sposób, ale nie chce działać.

Mam liste:
[HTML] pobierz, plaintext 
  1. <UL id=lista_pozycji>
  2. <LI>pozycja 1</LI>
  3. <LI>pozycja 2</LI>
  4. <LI>pozycja 3</LI>
  5. <LI>pozycja 4</LI>
  6. <LI>pozycja 5</LI>
  7. </UL>
[HTML] pobierz, plaintext


styl css:
[HTML] pobierz, plaintext 
  1. #lista_pozycji li:nth-child(even) {
  2. font-weight: bold;
  3. }
  4.  
  5. #lista_pozycji li:nth-child(odd) {
  6. font-weight: none;
  7. }
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
atomek4
post
Post #2





Grupa: Zarejestrowani
Postów: 179
Pomógł: 1
Dołączył: 8.03.2007
Skąd: Łódź

Ostrzeżenie: (0%)
-----

Witaj,
przykład, który podałeś korzysta z pseudo-klasy z CSS3. Niestety tego chyba żadna przeglądarka nie wspiera. Najlepiej będzie jeśli utworzysz sobie chyba oddzielna klasę dla parzystych elementów.
Go to the top of the page
+Quote Post
abc667
post
Post #3





Grupa: Zarejestrowani
Postów: 229
Pomógł: 0
Dołączył: 29.05.2007

Ostrzeżenie: (0%)
-----

możesz też użyć js

[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <title>...</title>
  5. <script type="text/javascript">
  6.  
  7. function $(id)
  8. {
  9. return document.getElementById(id);
  10. }
  11.  
  12. window.onload = function() {
  13.  
  14. lists = new Array('raz', 'dwa', 'trzy');
  15. colors = new Array('red', 'green');
  16.  
  17. 	for(var i=0;i<lists.length;i++)
  18. 	{
  19. 		if($(lists[i]).hasChildNodes())
  20. 		{
  21. 		var elements = $(lists[i]).childNodes;
  22. 		var p = 0;
  23. 			for(var j=0;j<elements.length;j++)
  24. 			{
  25. 				if(elements[j].nodeType == 1)
  26. 				{
  27. 				elements[j].style.backgroundColor = colors[p];
  28. 				p = (p>=colors.length-1 ? 0 : p+1);
  29. 				}
  30. 			}
  31. 		}
  32. 	}
  33.  
  34. }
  35.  
  36.  
  37. </script>
  38. </head>
  39. <body>
  40.  
  41. <ul id="raz">
  42. <li>jeden
  43. <li>dwa
  44. <li>trzy
  45. <li>cztery
  46. <li>piec
  47. <li>szecs
  48. </ul>
  49.  
  50.  
  51. <ul id="dwa">
  52. <li>jeden
  53. <li>dwa
  54. <li>trzy
  55. <li>cztery
  56. <li>piec
  57. <li>szecs
  58. </ul>
  59.  
  60. <ol id="trzy">
  61. <li>jeden
  62. <li>dwa
  63. <li>trzy
  64. <li>cztery
  65. <li>piec
  66. <li>szecs
  67. </ol>
  68.  
  69. </body>
  70. </html>
[HTML] pobierz, plaintext

to tablicy colors mozesz wpisać dowolną liczbę kolorów, które będą się powtarzać
Go to the top of the page
+Quote Post
webdice
post
Post #4


Developer


Grupa: Moderatorzy
Postów: 3 045
Pomógł: 290
Dołączył: 20.01.2007
A jak tych elementów będzie dużo więcej? Moim zdaniem pobrać lepiej wszystkie elementy o danej nazwie (name) i wtedy kolorować co druga linie.
Go to the top of the page
+Quote Post
abc667
post
Post #5





Grupa: Zarejestrowani
Postów: 229
Pomógł: 0
Dołączył: 29.05.2007

Ostrzeżenie: (0%)
-----

podałem tylko przykład, raczej nie trudno sobie dostosować?
Go to the top of the page
+Quote Post
Zajec
post
Post #6





Grupa: Zarejestrowani
Postów: 1 086
Pomógł: 8
Dołączył: 10.12.2003

Ostrzeżenie: (0%)
-----

Cytat(atomek4 @ 27.06.2007, 17:47:50 ) *
przykład, który podałeś korzysta z pseudo-klasy z CSS3. Niestety tego chyba żadna przeglądarka nie wspiera.

1) Selektory dokładnie mówiąc :-)
2) nth-child wspiera Konquerora oraz nadchodząca Opera 9.50.
Go to the top of the page
+Quote Post
atomek4
post
Post #7





Grupa: Zarejestrowani
Postów: 179
Pomógł: 1
Dołączył: 8.03.2007
Skąd: Łódź

Ostrzeżenie: (0%)
-----

@zajec

Na jednych stronach piszą, że to pseudo klasa na drugim selektor, nie sprawdziłem dokładnie (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post
Zajec
post
Post #8





Grupa: Zarejestrowani
Postów: 1 086
Pomógł: 8
Dołączył: 10.12.2003

Ostrzeżenie: (0%)
-----

Cytat(atomek4 @ 30.06.2007, 19:25:26 ) *
@zajec

Na jednych stronach piszą, że to pseudo klasa na drugim selektor, nie sprawdziłem dokładnie (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)


Samo W3C twierdzi że to selectors, więc myślę że można tak to przypisać :-)
Go to the top of the page
+Quote Post
abc667
post
Post #9





Grupa: Zarejestrowani
Postów: 229
Pomógł: 0
Dołączył: 29.05.2007

Ostrzeżenie: (0%)
-----

ale chyba pseudoklasa to rodzaj selektora? :-)
Go to the top of the page
+Quote Post
atomek4
post
Post #10





Grupa: Zarejestrowani
Postów: 179
Pomógł: 1
Dołączył: 8.03.2007
Skąd: Łódź

Ostrzeżenie: (0%)
-----

Robi się z tego offtopic pomału (IMG:http://forum.php.pl/style_emoticons/default/smile.gif) Ja tylko tak napisałem, żeby kolega miał świadomość, że jego kod może i jest dobry, ale jeszcze nie na dzisiaj (IMG:http://forum.php.pl/style_emoticons/default/smile.gif) Wiadomo na pewno, że jest to część specyfikacji CSS3.

Ten post edytował atomek4 1.07.2007, 15:21:26
Go to the top of the page
+Quote Post
shpyo
post
Post #11





Grupa: Zarejestrowani
Postów: 574
Pomógł: 2
Dołączył: 13.04.2004
Skąd: Lublin

Ostrzeżenie: (0%)
-----

Po co kombinować?
Nie możesz nadać wszystkim LI jakiś styl, a potem w kodzie (pętlą którą będzie tworzył listę) w co drugim LI dasz klasę np. parzysty i tą klasę ostylujesz oddzielnie?
Go to the top of the page
+Quote Post
« Następny starszy · Po stronie przeglądarki · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 5.10.2025 - 05:41
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn